<template>
  <view :data-theme="theme()" :class="theme() || ''" class="pb60">
    <view class="form-box mb20">
      <view class="d-b-c form-item" style="border: none">
        <view class="f30 form-name">
          <text class="dominant mr10">*</text>
          {{ $t('user.product_name') }}
        </view>
        <view class="form-content">
          <text class="f24 gray9 ml20">{{
            form.productName.length + "/" + 60
            }}</text>
        </view>
      </view>
      <input class="form-input flex-1 pb20 border-b" type="text" placeholder-class="gray9"
        :placeholder="$t('user.for_example')+':'+`【${$t('user.five_pair_pack')}】${$t('user.korean_retro_socks')}`"
        v-model="form.productName" />
      <view class="d-b-c form-item" style="border: none">
        <view class="f30 form-name">
          <text class="dominant mr10">*</text>
          {{ $t('user.product_image') }}
        </view>
      </view>
      <view class="img-list">
        <view class="img-upload" v-for="(item, index) in form.image" :key="index">
          <image :src="item.filePath" mode="aspectFit"></image>
          <view class="close-btn icon iconfont icon-guanbi theme-btn" @click="deleteImg('image', index)">
          </view>
        </view>
        <view class="img-upload" @click="openUpload('image')">
          <text class="icon iconfont icon-31paishe"></text>
          <text class="f24 gray9">{{ $t('user.product_image') }}</text>
        </view>
      </view>
      <view class="d-b-c form-item" style="border-bottom: none; border-top: 1rpx solid #eee">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          {{ $t('user.product_video') }}
        </view>
      </view>
      <view class="img-list">
        <view v-if="!form.videoId" class="img-upload" @click="openUpload('video', true)">
          <text class="icon iconfont icon-shangchuanshipin"></text>
          <text class="f24 gray9">{{ $t('user.product_video') }}</text>
        </view>
        <view class="img-upload" v-if="form.videoId">
          <video :src="form.video.filePath"></video>
          <view class="close-btn icon iconfont icon-guanbi theme-btn" @click="deleteImg('video')"></view>
        </view>
        <view class="img-upload" v-if="!form.posterId" @click="openUpload('poster')">
          <text class="icon iconfont icon-31paishe"></text>
          <text class="f24 gray9">{{ $t('user.video_cover') }}</text>
        </view>
        <view class="img-upload" v-if="form.posterId">
          <image :src="form.poster.filePath" mode="aspectFit"></image>
          <view class="close-btn icon iconfont icon-guanbi theme-btn" @click="deleteImg('poster')"></view>
        </view>
      </view>
      <picker :range="category" range-key="name" @change="changeType($event, 'category')">
        <view class="d-b-c form-item" style="border-bottom: 1rpx solid #eee; border-top: 1rpx solid #eee">
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            {{ $t('user.product_category') }}
          </view>
          <view class="d-e-c flex-1 form-content">
            <view class="gray9 f30">{{
              categoryIndex == -1 ? $t('user.please_select') : category[categoryIndex].name
              }}</view>
            <text class="icon iconfont icon-jiantou"></text>
          </view>
        </view>
      </picker>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          {{ $t('user.sales_status') }}
        </view>
        <view class="d-e-c flex-1 form-content">
          <view class="d-c-c ml20" @click="form.productStatus = 10">
            <view class="radio-group" :class="{ active: form.productStatus == 10 }"><text
                class="icon iconfont icon-tijiaochenggong"></text></view>
            <view class="gray9 f30">{{ $t('user.list_now') }}</view>
          </view>
          <view class="d-c-c ml20" @click="form.productStatus = 20">
            <view class="radio-group" :class="{ active: form.productStatus == 20 }"><text
                class="icon iconfont icon-tijiaochenggong"></text></view>
            <view class="gray9 f30">{{ $t('user.put_in_warehouse') }}</view>
          </view>
        </view>
      </view>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          {{ $t('user.product_highlight') }}
        </view>
        <view class="d-e-c flex-1 form-content"
          @click="openTextarea('sellingPoint', $t('user.product_highlight'))">
          <view class="f30 gray9 text-ellipsis ml30">{{
            form.sellingPoint || t('user.not_edited')
            }}</view>
          <text class="icon iconfont icon-jiantou"></text>
        </view>
      </view>
    </view>
    <view class="form-box mb20">
      <view class="d-b-c form-item">
        <view class="f30 form-name fb">
          <text class="white mr10">*</text>
          {{ $t('user.other_settings') }}
        </view>
      </view>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          {{ $t('user.product_attributes') }}
        </view>
        <view class="d-e-c flex-1 form-content">
          <view class="d-c-c ml20" @click="form.isVirtual = 0">
            <view class="radio-group" :class="{ active: form.isVirtual == 0 }"><text
                class="icon iconfont icon-tijiaochenggong"></text></view>
            <view class="gray9 f30">{{ $t('user.physical_product') }}</view>
          </view>
          <view class="d-c-c ml20" @click="form.isVirtual = 1">
            <view class="radio-group" :class="{ active: form.isVirtual == 1 }"><text
                class="icon iconfont icon-tijiaochenggong"></text></view>
            <view class="gray9 f30">{{ $t('user.virtual_product') }}</view>
          </view>
        </view>
      </view>
      <!--			<view class="d-b-c form-item" v-if="form.isVirtual == 0">-->
      <!--				<view class="f30 form-name">-->
      <!--					<text class="white mr10">*</text>-->
      <!--					运费-->
      <!--				</view>-->
      <!--				<view class="d-e-c flex-1 form-content">-->
      <!--					<view class="d-c-c ml20" @click="form.isDeliveryFree = 0">-->
      <!--						<view class="radio-group" :class="{ active: form.isDeliveryFree == 0 }"><text class="icon iconfont icon-tijiaochenggong"></text></view>-->
      <!--						<view class="gray9 f30">包邮</view>-->
      <!--					</view>-->
      <!--					<view class="d-c-c ml20" @click="form.isDeliveryFree = 1">-->
      <!--						<view class="radio-group" :class="{ active: form.isDeliveryFree == 1 }"><text class="icon iconfont icon-tijiaochenggong"></text></view>-->
      <!--						<view class="gray9 f30">运费模板</view>-->
      <!--					</view>-->
      <!--				</view>-->
      <!--			</view>-->
      <picker v-if="form.isVirtual == 0 && form.isDeliveryFree == 1" :range="delivery" range-key="name"
        @change="changeType($event, 'delivery')">
        <view class="d-b-c form-item" style="border-bottom: 1rpx solid #eee">
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            {{ $t('user.shipping_template') }}
          </view>
          <view class="d-e-c flex-1 form-content">
            <view class="gray9 f30">{{
              deliveryIndex == -1 ? $t('user.please_select') : delivery[deliveryIndex].name
              }}</view>
            <text class="icon iconfont icon-jiantou"></text>
          </view>
        </view>
      </picker>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="dominant mr10">*</text>
          {{ $t('user.product_sort') }}
        </view>
        <view class="d-b-c flex-1 form-content">
          <input class="form-input flex-1" placeholder-class="gray9" :placeholder="$t('user.please_enter')"
            type="number" v-model="form.productSort" />
        </view>
      </view>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="dominant mr10">*</text>
          {{ $t('user.purchase_limit') }}
        </view>
        <view class="d-b-c flex-1 form-content">
          <input class="form-input flex-1" placeholder-class="gray9" :placeholder="$t('user.please_enter')"
            type="number" v-model="form.limitNum" />
        </view>
      </view>
      <view class="f24 gray9 form-item">{{ $t('user.max_quantity_per_member', { place1: 0 }) }}</view>
      <view class="d-b-c form-item" v-if="form.isVirtual == 1">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          {{ $t('user.shipping_type') }}
        </view>
        <view class="d-e-c flex-1 form-content">
          <view class="d-c-c ml20" @click="form.virtualAuto = 1">
            <view class="radio-group" :class="{ active: form.virtualAuto == 1 }"><text
                class="icon iconfont icon-tijiaochenggong"></text></view>
            <view class="gray9 f30">{{ $t('user.automatic') }}</view>
          </view>
          <view class="d-c-c ml20" @click="form.virtualAuto = 0">
            <view class="radio-group" :class="{ active: form.virtualAuto == 0 }"><text
                class="icon iconfont icon-tijiaochenggong"></text></view>
            <view class="gray9 f30">{{ $t('user.manual') }}</view>
          </view>
        </view>
      </view>
      <view class="d-b-c form-item" v-if="form.isVirtual == 1">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          {{ $t('user.virtual_content') }}
        </view>
        <view class="d-e-c flex-1 form-content" @click="openTextarea('virtualContent', $t('user.virtual_content'))">
          <view class="f30 gray9 text-ellipsis ml30">{{
            form.virtualContent || $t('user.not_edited')
            }}</view>
          <text class="icon iconfont icon-jiantou"></text>
        </view>
      </view>
    </view>
    <view class="form-box mb20">
      <view class="d-b-c form-item">
        <view class="f30 form-name fb">
          <text class="white mr10">*</text>
          {{ $t('user.specifications') }}/{{ $t('user.inventory') }}
        </view>
      </view>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          {{ $t('user.inventory_calculation') }}
        </view>
        <view class="d-e-c flex-1 form-content">
          <view class="d-c-c ml20" @click="form.deductStockType = 10">
            <view class="radio-group" :class="{ active: form.deductStockType == 10 }"><text
                class="icon iconfont icon-tijiaochenggong"></text></view>
            <view class="gray9 f30">{{ $t('user.reduce_inventory_on_order') }}</view>
          </view>
          <view class="d-c-c ml20" @click="form.deductStockType = 20">
            <view class="radio-group" :class="{ active: form.deductStockType == 20 }"><text
                class="icon iconfont icon-tijiaochenggong"></text></view>
            <view class="gray9 f30">{{ $t('user.reduce_inventory_on_payment') }}</view>
          </view>
        </view>
      </view>
      <view class="d-b-c form-item">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          {{ $t('user.product_specifications') }}
        </view>
        <view class="d-e-c flex-1 form-content">
          <view class="d-c-c ml20" @click="form.specType = 10">
            <view class="radio-group" :class="{ active: form.specType == 10 }"><text
                class="icon iconfont icon-tijiaochenggong"></text></view>
            <view class="gray9 f30">{{ $t('user.single_specification') }}</view>
          </view>
          <view class="d-c-c ml20" @click="form.specType = 20">
            <view class="radio-group" :class="{ active: form.specType == 20 }"><text
                class="icon iconfont icon-tijiaochenggong"></text></view>
            <view class="gray9 f30">{{ $t('user.multiple_specifications') }}</view>
          </view>
        </view>
      </view>
      <!-- 单规格 -->
      <template v-if="form.specType == 10">
        <view class="d-b-c form-item">
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            {{ $t('user.product_code') }}
          </view>
          <view class="d-b-c flex-1 form-content">
            <input class="form-input flex-1" placeholder-class="gray9" :placeholder="$t('user.please_enter')"
              type="text" v-model="formSku.productNo" />
          </view>
        </view>
        <view class="d-b-c form-item">
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            {{ $t('user.product_price') }}
          </view>
          <view class="d-b-c flex-1 form-content">
            <input class="form-input flex-1" placeholder-class="gray9" :placeholder="$t('user.please_enter')"
              type="digit" v-model="formSku.productPrice" />
          </view>
        </view>
        <view class="d-b-c form-item">
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            {{ $t('user.product_strike_price') }}
          </view>
          <view class="d-b-c flex-1 form-content">
            <input class="form-input flex-1" placeholder-class="gray9" :placeholder="$t('user.please_enter')"
              type="digit" v-model="formSku.linePrice" />
          </view>
        </view>
        <view class="d-b-c form-item">
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            {{ $t('user.stock_quantity') }}
          </view>
          <view class="d-b-c flex-1 form-content">
            <input class="form-input flex-1" placeholder-class="gray9" :placeholder="$t('user.please_enter')"
              type="number" v-model="formSku.stockNum" />
          </view>
        </view>
        <view class="d-b-c form-item">
          <view class="f30 form-name">
            <text class="dominant mr10">*</text>
            {{ $t('user.product_weight') }}(Kg)
          </view>
          <view class="d-b-c flex-1 form-content">
            <input class="form-input flex-1" placeholder-class="gray9" :placeholder="$t('user.please_enter')"
              type="digit" v-model="formSku.productWeight" />
          </view>
        </view>
      </template>
      <template v-if="form.specType == 20">
        <view class="d-e-c p-20-0">
          <button v-if="form.specMany && form.specMany.specAttr.length <= 1" class="theme-btn small-btn"
            @click="addSpec">
            +{{ $t('user.add_specification') }}
          </button>
          <button v-if="form.specMany && form.specMany.specAttr.length > 1" class="btn-gray small-btn" disabled>
            +{{ $t('user.add_specification') }}
          </button>
        </view>
        <template v-if="form.specMany && form.specMany.specAttr">
          <view class="specAttr-groups" v-for="(item, index) in form.specMany.specAttr" :key="index">
            <view class="d-b-s mb20">
              <view class="f30 gray6">{{ item.groupName }}</view>
              <text class="icon iconfont icon-lajitong" @click="deleteSpec(index)"></text>
            </view>
            <view class="spec_values">
              <view class="spec_value pr" v-for="(aitem, aindex) in item.specItems" :key="aindex">
                <text>{{ aitem.specValue }}</text>
                <view class="close-btn icon iconfont icon-guanbi" @click="deleteSpecValue(index, aindex)"></view>
              </view>
            </view>
            <view class="d-b-c flex-1 form-content" v-if="item.specItems.length <= 1">
              <input class="form-input border-input flex-1" placeholder-class="gray9"
                :placeholder="$t('user.please_enter')" type="text" v-model="specValuesList[index]" />
              <button class="theme-btn small-btn" @click="addApecValue(index)">
                +{{ $t('user.add') }}
              </button>
            </view>
          </view>
          <view class="d-b-c form-item" @click="openMany">
            <view class="f30 form-name">
              <text class="white mr10">*</text>
              {{ $t('user.specification_details') }}
            </view>
            <view class="d-e-c flex-1 form-content"><text class="icon iconfont icon-jiantou"></text></view>
          </view>
        </template>
      </template>
    </view>
    <view class="form-box">
      <view class="d-b-c form-item" @click="isContent = true">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          {{ $t('user.product_details') }}
        </view>
        <view class="d-e-c flex-1 form-content"><text class="icon iconfont icon-jiantou"></text></view>
      </view>
      <view class="d-b-c form-item" @click="isAdvanced = true">
        <view class="f30 form-name">
          <text class="white mr10">*</text>
          {{ $t('user.advanced_settings') }}
        </view>
        <view class="d-e-c flex-1 form-content"><text class="icon iconfont icon-jiantou"></text></view>
      </view>
    </view>
    <button class="btn-normal theme-btn" @click="submitFunc">{{ $t('user.submit') }}</button>
    <view v-if="showPop">
      <view class="pop-bg"></view>
      <view class="pop-input d-c d-c-c">
        <view class="ww100 flex-1 pop-top">
          <text class="icon iconfont icon-guanbi" @click="closeFunc(null)"></text>
          <view class="pop-title">{{ title || $t('user.title') }}</view>
          <view class="input-box d-c-c">
            <textarea class="textarea-box" v-model="popValue" :placeholder="$t('user.please_enter')+'...'"
              placeholder-class="gray9"></textarea>
          </view>
        </view>
        <view class="border-t ww100 d-b-c" style="height: 89rpx">
          <view class="border-r fb d-c-c flex-1 f28 gray3 hh100" @click="closeFunc(null)">{{ $t('user.cancel') }}</view>
          <view class="d-c-c flex-1 f28 dominant fb hh100" @click="closeFunc(true)">{{ $t('user.confirm0') }}</view>
        </view>
      </view>
    </view>
    <view v-if="isSpec">
      <view class="pop-bg"></view>
      <view class="pop-input d-c d-c-c">
        <view class="ww100 flex-1 pop-top">
          <text class="icon iconfont icon-guanbi" @click="closeSpec(null)"></text>
          <view class="pop-title tc" style="font-weight: normal">{{ $t('user.add_specification') }}</view>
          <view class="pop-title">{{ $t('user.specification_name') }}</view>
          <view class="input-box-old d-c-c"><input :placeholder="$t('user.please_enter')" class="input-pop" type="text"
              v-model="specName" /></view>
          <view class="pop-title">{{ $t('user.specification_value') }}</view>
          <view class="input-box-old d-c-c"><input :placeholder="$t('user.please_enter')" class="input-pop" type="text"
              v-model="specValue" /></view>
        </view>
        <view class="border-t ww100 d-b-c" style="height: 89rpx">
          <view class="border-r fb d-c-c flex-1 f28 gray3 hh100" @click="closeSpec(null)">{{ $t('user.cancel') }}</view>
          <view class="d-c-c flex-1 f28 dominant fb hh100" @click="closeSpec(true)">{{ $t('user.confirm0') }}</view>
        </view>
      </view>
    </view>
    <view v-if="isContent">
      <view class="pop-bg"></view>
      <view class="pop-input d-c d-c-c">
        <view class="ww100 flex-1 pop-top">
          <text class="icon iconfont icon-guanbi" @click="closeContent(null)"></text>
          <view class="pop-title">{{ $t('user.product_details') }}</view>
          <view class="d-b-c form-item">
            <view class="f30 form-name">{{ $t('user.detail_type') }}</view>
            <view class="d-e-c flex-1 form-content">
              <view class="d-c-c ml20" @click="form.isPicture = 1">
                <view class="radio-group" :class="{ active: form.isPicture == 1 }"><text
                    class="icon iconfont icon-tijiaochenggong"></text></view>
                <view class="gray9 f30">{{ $t('user.pure_image') }}</view>
              </view>
              <view class="d-c-c ml20" @click="form.isPicture = 0">
                <view class="radio-group" :class="{ active: form.isPicture == 0 }"><text
                    class="icon iconfont icon-tijiaochenggong"></text></view>
                <view class="gray9 f30">{{ $t('user.image_text') }}</view>
              </view>
            </view>
          </view>
          <view class="d-b-c form-item" style="border: none">
            <view class="f30 form-name">{{ $t('user.detail_content') }}</view>
          </view>
          <view class="img-list" v-if="form.isPicture == 1">
            <view class="img-upload" v-for="(item, index) in form.contentImage" :key="index">
              <image :src="item.filePath" mode="aspectFit"></image>
              <view class="close-btn icon iconfont icon-guanbi theme-btn" @click="deleteImg('contentImage', index)">
              </view>
            </view>
            <view class="img-upload" @click="openUpload('contentImage')">
              <text class="icon iconfont icon-31paishe"></text>
              <text class="f24 gray9">{{ $t('user.detail_image') }}</text>
            </view>
          </view>
          <view class="f24 gray9 form-item" v-else>{{ $t('user.edit_on_pc') }}</view>
        </view>
        <view class="border-t ww100 d-b-c" style="height: 89rpx">
          <view class="border-r fb d-c-c flex-1 f28 gray3 hh100" @click="closeContent(null)">{{ $t('user.cancel') }}
          </view>
          <view class="d-c-c flex-1 f28 dominant fb hh100" @click="closeContent(true)">{{ $t('user.confirm0') }}</view>
        </view>
      </view>
    </view>
    <view v-if="isAdvanced">
      <view class="pop-bg"></view>
      <view class="pop-input d-c d-c-c">
        <view class="ww100 flex-1 pop-top">
          <text class="icon iconfont icon-guanbi" @click="closeAdvanced(null)"></text>
          <view class="pop-title tc" style="font-weight: normal">{{ $t('user.advanced_settings') }}</view>
          <view class="pop-title-h">{{ $t('user.points_settings') }}</view>
          <view class="d-b-c form-item">
            <view class="f30 form-name">{{ $t('user.enable_points_gifting') }}</view>
            <view class="d-e-c flex-1 form-content">
              <switch @change="switchChange($event, 'isPointsGift')" :checked="form.isPointsGift == 1"
                :color="getThemeColor()" style="transform: scale(0.5)" />
            </view>
          </view>
          <view class="d-b-c form-item">
            <view class="f30 form-name">{{ $t('user.allow_points_deduction') }}</view>
            <view class="d-e-c flex-1 form-content">
              <switch @change="switchChange($event, 'isPointsDiscount')" :checked="form.isPointsDiscount == 1"
                :color="getThemeColor()" style="transform: scale(0.5)" />
            </view>
          </view>
          <template v-if="form.isPointsDiscount == 1">
            <view class="d-b-c form-item" style="border: none">
              <view class="f30 form-name">{{ $t('user.max_deduction_points') }}</view>
              <view class="d-b-c flex-1 form-content">
                <input class="form-input flex-1" placeholder-class="gray9" :placeholder="$t('user.please_enter')"
                  type="digit" v-model="form.maxPointsDiscount" />
              </view>
            </view>
            <view class="f24 gray9 form-name">
              {{ $t('user.max_deduction_points_info') }}-{{ $t('user.universal_setting', { place1: 1 }) }}</view>
          </template>

          <view class="pop-title-h mt30">{{ $t('user.distribution_settings') }}</view>
          <view class="d-b-c form-item">
            <view class="f30 form-name">{{ $t('user.enable_distribution') }}</view>
            <view class="d-e-c flex-1 form-content">
              <switch @change="switchChange($event, 'isAgent')" :checked="form.isAgent == 1" :color="getThemeColor()"
                style="transform: scale(0.5)" />
            </view>
          </view>
        </view>
        <view class="border-t ww100 d-b-c" style="height: 89rpx">
          <view class="border-r fb d-c-c flex-1 f28 gray3 hh100" @click="closeAdvanced(null)">{{ $t('user.cancel') }}
          </view>
          <view class="d-c-c flex-1 f28 dominant fb hh100" @click="closeAdvanced(true)">{{ $t('user.confirm0') }}</view>
        </view>
      </view>
    </view>
    <view v-if="isMany">
      <view class="pop-bg"></view>
      <view class="pop-input d-c d-c-c">
        <view class="ww100 flex-1 pop-top pb20">
          <text class="icon iconfont icon-guanbi" @click="closeMany(null)"></text>
          <view class="pop-title tc" style="font-weight: normal; margin-bottom: 0">{{ $t('user.specification_details') }}
          </view>
          <view class="pop-spec-list">
            <view class="pop-spec-item pr" :class="{ active: activeSpec == index }" @click="activeSpec = index"
              v-for="(item, index) in form.specMany.specList" :key="index">
              {{ getSpecName(item.specSkuId) }}
            </view>
          </view>
          <view class="p-20-0 pop-spec-item-detail" :class="{ closebox: activeSpec != index }"
            v-for="(item, index) in form.specMany.specList" :key="index">
            <view class="d-b-c flex-1 form-content mb20">
              <view class="f24 form-name">{{ $t('user.product_code') }}</view>
              <input class="form-input border-input flex-1" placeholder-class="gray9"
                :placeholder="$t('user.enter_product_code')" type="text" v-model="item.specForm.productNo" />
            </view>
            <view class="d-b-c flex-1 form-content mb20">
              <view class="f24 form-name">{{ $t('user.sale_price') }}</view>
              <input class="form-input border-input flex-1" placeholder-class="gray9"
                :placeholder="$t('user.enter_sale_price')" type="digit" v-model="item.specForm.productPrice" />
            </view>
            <view class="d-b-c flex-1 form-content mb20">
              <view class="f24 form-name">{{ $t('user.strike_price') }}</view>
              <input class="form-input border-input flex-1" placeholder-class="gray9"
                :placeholder="$t('user.enter_strike_price')" type="digit" v-model="item.specForm.linePrice" />
            </view>
            <view class="d-b-c flex-1 form-content mb20">
              <view class="f24 form-name">{{ $t('user.inventory') }}</view>
              <input class="form-input border-input flex-1" placeholder-class="gray9"
                :placeholder="$t('user.enter_stock')" type="number" v-model="item.specForm.stockNum" />
            </view>
            <view class="d-b-c flex-1 form-content">
              <view class="f24 form-name">{{ $t('user.weight') }}(kg)</view>
              <input class="form-input border-input flex-1" placeholder-class="gray9"
                :placeholder="`${$t('user.enter_weight')}(kg)`" type="digit" v-model="item.specForm.productWeight" />
            </view>
          </view>
        </view>
      </view>
    </view>
    <!-- 上传头像 -->
    <Upload v-if="isUpload" :num="1" :isVideo="isVideo" @getImgs="getImgsFunc"></Upload>
  </view>
</template>

<script>
import Upload from "@/components/upload/upload.vue";
import rule from "./product_rule.js";
export default {
  components: {
    Upload,
  },
  data() {
    return {
      productId: 0,
      activeSpec: 0,
      form: {
        productName: "" /* 商品名称 */,
        image: [] /* 商品主图 */,
        video: {} /* 商品视频 */,
        videoId: 0 /* 商品视频ID */,
        poster: {} /* 商品视频封面 */,
        posterId: 0 /* 商品视频封面ID */,
        sellingPoint: "" /* 商品卖点 */,
        productStatus: 10 /* 销售状态 */,
        auditStatus: 0 /* 是否审核 */,
        categoryId: 0 /* 商品分类 */,
        isVirtual: 0 /* 商品属性 */,
        productSort: 0 /* 商品排序 */,
        limitNum: 0 /* 限购数量 */,
        virtualAuto: 0 /* 发货类型 */,
        virtualContent: "" /* 虚拟内容 */,
        isDeliveryFree: 1 /* 运费 */,
        deliveryId: 0 /*运费模板 */,
        isPointsGift: 0 /*是否开启积分赠送 */,
        isPointsDiscount: 0 /*是否允许使用积分抵扣 */,
        maxPointsDiscount: "" /*最大抵扣积分数量 */,
        isAgent: 0 /*是否开启分销 */,
        isPicture: 1,
        contentImage: [] /* 详情图片 */,
        deductStockType: 10 /* 库存计算方式 */,
        specType: 10 /* 产品规格 */,
        sku: {
          productNo: "" /* 产品编码 */,
          productPrice: "" /* 产品价格 */,
          linePrice: "" /* 产品划线价 */,
          stockNum: "" /* 库存数量 */,
          productWeight: "" /* 商品重量 */,
        },
        specMany: {
          specAttr: [],
          specList: [],
        },
      },
      delivery: [],
      deliveryIndex: -1,
      category: [],
      categoryIndex: -1,
      title: "" /* 文本域弹窗标题 */,
      textType: "" /* 文本域弹窗类型 */,
      showPop: false /* 文本域弹窗 */,
      isContent: false,
      isAdvanced: false,
      isSpec: false,
      specValue: "",
      specName: "",
      popValue: "",
      fileType: "",
      uploadType: "",
      isUpload: "",
      isVideo: false,
      specValuesList: [],
      isMany: false,
    };
  },
  onLoad(e) {
    this.productId = e.productId || 0;
    this.getData();
  },
  onShow() {
    uni.setNavigationBarTitle({
			title: this.$t('user.add_product')
		})
  },
  computed: {
    formSku() {
      return this.form.sku || {};
    },
  },
  methods: {
    deleteSpec(i) {
      let self = this;
      uni.showModal({
        title: this.$t('user.notification'),
        content:this.$t('common.confirm_remove')+"?",
        success(e) {
          if (e.confirm) {
            self.form.specMany.specAttr.splice(i, 1);
          }
        },
      });
    },
    deleteSpecValue(i, ci) {
      let self = this;
      uni.showModal({
        title: this.$t('user.notification'),
        content:this.$t('common.confirm_remove')+"?",
        success(e) {
          if (e.confirm) {
            self.form.specMany.specAttr[i].specItems.splice(ci, 1);
          }
        },
      });
    },
    addApecValue(i) {
      let self = this;
      let specValue = this.specValuesList[i];
      if (!specValue) {
        uni.showToast({
          title: this.$t('user.enter_specification_value'),
          icon: "none",
        });
        return;
      }
      self._post(
        "supplier/spec/addSpecValue",
        {
          specId: self.form.specMany.specAttr[i].groupId,
          specValue: specValue,
        },
        (res) => {
          // 记录规格数据
          self.form.specMany.specAttr[i].specItems.push({
            itemId: res.data.specValueId,
            specValue: specValue,
          });
          self.specValuesList[i] = "";
        },
        (fail) => {
          self.specValuesList[i] = "";
        }
      );
    },
    addSpec() {
      let self = this;
      self.isSpec = true;
    },
    getData() {
      let self = this;
      let url = "supplier/product/add";
      let params = {};
      if (self.productId) {
        url = "supplier/product/edit";
        params.productId = self.productId;
      }
      self._get(url, params, (res) => {
        let arr = [];
        let category = [];
        category = res.data.category;
        if (category.length > 0) {
          category.forEach((item, index) => {
            arr.push({
              name: item.name,
              categoryId: item.categoryId,
            });
            if (item.child && item.child.length > 0) {
              item.child.forEach((citem, cindex) => {
                arr.push({
                  name: item.name + "—" + citem.name,
                  categoryId: citem.categoryId,
                });
              });
            }
          });
        }
        self.category = arr;
        self.delivery = res.data.delivery;
        if (self.productId) {
          Object.assign(self.form, res.data.model);
          self.form.productStatus = res.data.model.productStatus.value;
          if (res.data.specData) {
            self.$set(self.form, "specMany", res.data.specData);
          } else {
            self.$set(self.form, "specMany", {
              specAttr: [],
              specList: [],
            });
            self.form.sku = res.data.model.sku[0];
          }
          if (self.form.deliveryId == 0) {
            self.$set(self.form, "isDeliveryFree", 0);
          } else {
            self.$set(self.form, "isDeliveryFree", 1);
          }
          //修改时审核状态
          if (
            res.data.auditSetting &&
            res.data.auditSetting.editAudit == 1 &&
            self.productId
          ) {
            self.form.auditStatus = 0;
          }
          self.category.forEach((item, index) => {
            if (item.categoryId == self.form.categoryId) {
              self.categoryIndex = index;
              return;
            }
          });
          self.delivery.forEach((item, index) => {
            if (item.deliveryId == self.form.deliveryId) {
              self.deliveryIndex = index;
              return;
            }
          });
          console.log(self.deliveryIndex);
        }
      });
    },
    submitFunc() {
      let self = this;
      let params = self.form;
      if (self.categoryIndex != -1) {
        params.categoryId = self.category[self.categoryIndex].categoryId;
      } else {
        uni.showToast({
          title: this.$t('user.select_product_category'),
          icon: "none",
        });
        return;
      }

      let flag = rule.validate(params);
      if (flag) {
        let url = "supplier/product/add";
        let param = params;
        let skus = this.formSku;
        if (self.productId) {
          url = "supplier/product/edit";
          param.productId = self.productId;
        }
        param.sku = skus;
        self._postBody(url, param, (res) => {
          uni.showModal({
            title: this.$t('user.notification'),
            content: res.msg,
            success() {
              uni.navigateBack();
            },
          });
        });
      }
      console.log(flag);
    },
    openTextarea(name, title) {
      this.title = title;
      this.textType = name;
      this.popValue = this.form[name];
      this.showPop = true;
    },
    changeType(e, name) {
      this[name + "Index"] = e.detail.value;
      this.form[name + "Id"] = this[name][this[name + "Index"]].deliveryId;
    },
    closeFunc(e) {
      if (e) {
        this.form[this.textType] = this.popValue;
      }
      this.popValue = "";
      this.title = "";
      this.showPop = false;
    },
    closeSpec(e) {
      let self = this;
      if (e) {
        if (self.specName === "" || self.specValue === "") {
          uni.showToast({
            title: this.$t('user.fill_rule_name_or_value'),
            icon: "none",
          });
          return false;
        }
        self._post(
          "supplier/spec/addSpec",
          {
            specName: self.specName,
            specValue: self.specValue,
          },
          (res) => {
            // 记录规格数据
            self.form.specMany.specAttr.push({
              groupId: res.data.specId,
              groupName: self.specName,
              specItems: [
                {
                  itemId: res.data.specValueId,
                  specValue: self.specValue,
                },
              ],
              tempValue: "",
              loading: false,
            });

            self.specValue = "";
            self.specName = "";
          },
          (fail) => {
            self.specValue = "";
            self.specName = "";
          }
        );
      }
      this.isSpec = false;
    },
    closeContent(e) {
      if (e) {
      }
      this.isContent = false;
    },
    closeMany(e) {
      this.isMany = false;
    },
    closeAdvanced(e) {
      if (e) {
      }
      this.isAdvanced = false;
    },
    switchChange(e, name) {
      this.form[name] = e.detail.value ? 1 : 0;
    },
    deleteImg(name, n) {
      let self = this;
      uni.showModal({
        title: this.$t('user.notification'),
        content:this.$t('common.confirm_remove') +"?",
        success(e) {
          if (e.confirm) {
            if (n >= 0) {
              let arr = self.form[name];
              arr.splice(n, 1);
            } else {
              self.form[name] = {};
              self.form[name + "Id"] = 0;
            }
          }
        },
      });
    },
    /*获取上传的图片*/
    getImgsFunc(e) {
      let self = this;
      self.isUpload = false;
      if (e && typeof e != "undefined") {
        if (self.uploadType == "poster") {
          self.form.posterId = e[0].fileId;
          self.form[self.uploadType] = e[0];
        } else if (self.uploadType == "video") {
          self.form.videoId = e[0].fileId;
          self.form[self.uploadType] = e[0];
        } else if (self.uploadType != "poster") {
          self.form[self.uploadType].push(e[0]);
        } else {
          self.form[self.uploadType] = e[0];
        }
      }
    },
    /*打开上传图片*/
    openUpload(type, fileType) {
      this.uploadType = type;
      this.isVideo = fileType || false;
      this.isUpload = true;
    },
    clearImage(name, n) {
      if (n) {
        this.form[name].splice(n, 1);
      } else {
        this.form[name] = "";
      }
    },

    openMany() {
      this.buildSkulist();
      this.isMany = true;
    },
    /*构建规格组合列表*/
    buildSkulist: function () {
      let self = this;
      let specAttr = self.form.specMany.specAttr;
      let specArr = [];
      for (let i = 0; i < specAttr.length; i++) {
        specArr.push(specAttr[i].specItems);
      }

      let specListTemp = self.calcDescartes(specArr);

      let specList = [];
      for (let i = 0; i < specListTemp.length; i++) {
        let rows = [];
        let specSkuIdAttr = [];
        if (!Array.isArray(specListTemp[i])) {
          rows.push(specListTemp[i]);
        } else {
          rows = specListTemp[i];
        }
        for (let j = 0; j < rows.length; j++) {
          specSkuIdAttr.push(rows[j].itemId);
        }
        specList.push({
          productSkuId: 0,
          specSkuId: specSkuIdAttr.join("_"),
          rows: rows,
          specForm: {
            productNo: "",
            productPrice: "",
            linePrice: "",
            stockNum: "",
            productWeight: "",
          },
        });
      }

      // 合并旧sku数据
      if (self.form.specMany.specList.length > 0 && specList.length > 0) {
        for (let i = 0; i < specList.length; i++) {
          let overlap = self.form.specMany.specList.filter(function (val) {
            return val.specSkuId === specList[i].specSkuId;
          });
          if (overlap.length > 0) {
            specList[i].specForm = overlap[0].specForm;
            specList[i].productSkuId = overlap[0].productSkuId;
          }
        }
      }

      self.form.specMany.specList = specList;
    },
    /*规格组合*/
    calcDescartes: function (array) {
      if (array.length < 2) return array[0] || [];
      return [].reduce.call(array, function (col, set) {
        let res = [];
        col.forEach(function (c) {
          set.forEach(function (s) {
            let t = [].concat(Array.isArray(c) ? c : [c]);
            t.push(s);
            res.push(t);
          });
        });
        return res;
      });
    },
    getSpecName(id) {
      let self = this;
      console.log("11", id);
      let list = id.split("_");
      let name = [];
      let specAttr = self.form.specMany.specAttr;
      list.forEach((item, index) => {
        specAttr.forEach((aitem, aindex) => {
          aitem.specItems.forEach((sitem, sindex) => {
            if (item == sitem.itemId) {
              name.push(sitem.specValue);
            }
          });
        });
      });
      return name.join("/");
    },
  },
};
</script>

<style lang="scss">
.textarea-box {
  width: 100%;
  border: 2rpx solid #eee;
  border-radius: 5rpx;
  font-size: 26rpx;
  font-weight: 500;
  color: #575757;
  padding: 26rpx;
  box-sizing: border-box;
}

.border-input {
  width: 484rpx;
  height: 68rpx;
  background: #ffffff;
  border: 1rpx solid #eeeeee;
  border-radius: 10rpx;
  padding: 0 15rpx;
  box-sizing: border-box;
  font-size: 28rpx;
}

.form-box {
  padding: 0 30rpx;
  background-color: #fff;
}

.pop-spec-item-detail {
  .form-name {
    margin-right: 20rpx;
    width: 120rpx;
  }

  .form-input {
    font-size: 24rpx;
    padding-left: 20rpx;
  }
}

.pop-spec-item-detail.closebox {
  display: none;
}

.form-item {
  padding: 30rpx 0;
  border-bottom: 1rpx solid #eee;

  .form-name {
    margin-right: 20rpx;
  }

  .form-content {
    .form-input {
      text-align: right;
    }

    .icon-jiantou {
      font-size: 28rpx;
      color: #999;
      margin-left: 20rpx;
    }

    .radio-group {
      width: 46rpx;
      height: 46rpx;
      box-sizing: border-box;
      background: #ffffff;
      border: 1rpx solid #eeeeee;
      border-radius: 50%;
      margin-right: 10rpx;
      display: flex;
      justify-content: center;
      align-items: center;

      .icon-tijiaochenggong {
        display: none;
        font-size: 26rpx;
        font-weight: bold;
      }
    }

    .active {
      @include background_color("background_color");

      .icon-tijiaochenggong {
        display: block;
        color: #fff;
      }
    }
  }
}

.form-item:last-child {
  border: none;
}

.img-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;

  .img-upload {
    width: 170rpx;
    height: 160rpx;
    flex-shrink: 0;
    border: 2rpx solid #eeeeee;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    margin-right: 20rpx;
    margin-bottom: 20rpx;
    position: relative;

    .close-btn.icon {
      width: 38rpx;
      height: 38rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      position: absolute;
      right: -10rpx;
      top: -10rpx;
      z-index: 1;
      font-size: 24rpx;
      border-radius: 50%;
    }

    video,
    image {
      width: 170rpx;
      height: 160rpx;
    }

    .icon-31paishe,
    .icon-shangchuanshipin {
      font-size: 58rpx;
      color: #333;
      margin-bottom: 12rpx;
    }
  }
}

.pop-bg {
  position: fixed;
  left: 0;
  top: 0;
  bottom: 0;
  right: 0;
  margin: auto;
  z-index: 98;
  background-color: rgba(0, 0, 0, 0.65);
}

.icon.icon-guanbi {
  font-size: 32rpx;
  color: #999;
  position: absolute;
  right: 25rpx;
  top: 22rpx;
  z-index: 101;
}

.pop-input {
  width: 665rpx;
  // height: 290rpx;
  background: #ffffff;
  border-radius: 25rpx;
  position: fixed;
  left: 0;
  right: 0;
  top: 20%;
  // bottom: 0;
  margin: auto;
  z-index: 100;

  .form-item {
    padding: 20rpx 0;
  }
}

.pop-top {
  padding: 40rpx 60rpx 0 60rpx;
  box-sizing: border-box;
}

.pop-title {
  font-size: 30rpx;
  color: #333;
  font-weight: bold;
  margin-bottom: 22rpx;
}

.pop-title-h {
  font-size: 30rpx;
  height: 30rpx;
  line-height: 30rpx;
  padding-left: 17rpx;
  color: #333;
  font-weight: bold;
  border-left: 6rpx solid;
  @include border_color("border_color");
}

.input-box-old {
  width: 542rpx;
  height: 64rpx;
  background: #ffffff;
  border: 1rpx solid #dddddd;
  border-radius: 32rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 20rpx;
}

.input-box {
  // width: 542rpx;
  // height: 64rpx;
  // background: #ffffff;
  // border: 1rpx solid #dddddd;
  // border-radius: 32rpx;
  box-sizing: border-box;
  display: flex;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  margin-bottom: 20rpx;
}

.input-pop {
  box-sizing: border-box;
  border-radius: 32rpx;
  line-height: 1.5;
  font-size: 28rpx;
  color: #333;
  padding: 0 25rpx;
  border: none;
  flex: 1;
  outline-offset: 0;
}

.img-upload::v-deep .uni-video-bar {
  height: 40rpx;
  padding: 0 20rpx;
}

.img-upload::v-deep .uni-video-cover-play-button {
  width: 40rpx;
  height: 40rpx;
}

.img-upload::v-deep .uni-video-cover-duration {
  font-size: 22rpx;
}

.img-upload::v-deep .uni-video-fullscreen {
  padding: 0;
  width: 30rpx;
  height: 30rpx;
}

.img-upload::v-deep .uni-video-control-button {
  padding: 0;
  width: 14rpx;
  height: 14rpx;
}

.img-upload::v-deep .uni-video-current-time {
  display: none;
}

.img-upload::v-deep .uni-video-progress-container {
  display: none;
}

.img-upload::v-deep .uni-video-duration {
  display: none;
}

.btn-normal {
  width: 90%;
  margin: 60rpx auto;
  height: 92rpx;
  line-height: 92rpx;
  border-radius: 50rpx;
  font-size: 28rpx;
  display: flex;
  justify-content: center;
  align-items: center;
}

.small-btn {
  height: 68rpx;
  line-height: 68rpx;
  border-radius: 34rpx;
  background: #ff5800;
  @include background_color("background_color");
  border-radius: 34rpx;
  font-size: 26rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0 33rpx;
}

button.btn-gray.small-btn {
  background: #cccccc !important;
  color: #ffffff !important;
}

.specAttr-groups {
  width: 690rpx;
  padding: 30rpx;
  box-sizing: border-box;
  border: 1px solid;
  @include border_color("border_color");
  border-radius: 15rpx;
  margin-bottom: 20rpx;

  .icon-lajitong {
    font-size: 30rpx;
    color: #666;
    margin-left: 20rpx;
  }

  .spec_values {
    .spec_value {
      padding: 0 25rpx;
      min-width: 146rpx;
      background: #fff2eb;
      border: 1rpx solid;
      @include border_color("border_color");
      border-radius: 10rpx;
      font-size: 24rpx;
      @include font_color("font_color");
      margin-right: 50rpx;
      margin-bottom: 20rpx;
      display: inline-block;
      flex-shrink: 0;
      line-height: 56rpx;
      text-align: center;

      .close-btn.icon {
        width: 38rpx;
        height: 38rpx;
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        right: -10rpx;
        top: -10rpx;
        z-index: 1;
        font-size: 24rpx;
        border-radius: 50%;
        background: #000000;
        color: #fff;
      }
    }
  }
}

.pop-spec-list {
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: nowrap;
  overflow-x: auto;
  border-bottom: 1rpx solid #eee;
  box-sizing: border-box;

  .pop-spec-item {
    padding: 23rpx 0;
    font-size: 26rpx;
    color: #333;
    margin-right: 40rpx;
    flex-shrink: 0;
  }

  .pop-spec-item.active::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    margin: auto;
    bottom: 0;
    width: 96%;
    height: 6rpx;
    border-radius: 4rpx;
    @include background_color("background_color");
  }
}
</style>
